<template>
    <el-card shadow="never" style="height: calc(100% - 10px)" v-loading="loading">
        <template #header>
            <el-icon @click="goBack" :size="20" style="cursor: pointer"
            >
                <Back
                />
            </el-icon>
            <span style="margin-left: 10px; font-size: 1.5rem"
            >采集器: {{ dataDetails?.taskName }}</span
            >
            <el-icon
                    @click="getDataCollect(route.params.id as unknown as number)"
                    :size="22"
                    style="cursor: pointer; float: right"
            >
                <Refresh
                />
            </el-icon>
        </template>

        <!--  -->
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="采集器实例" name="first">
                <HarvesterData :data="dataDetails!"/>
            </el-tab-pane>
            <!--      <el-tab-pane label="物模型" name="second">-->
            <!--        <ThingModelView :data="dataDetails!"/>-->
            <!--      </el-tab-pane>-->
            <el-tab-pane label="解析协议" name="third">
                <ResolverView :data="dataDetails!"/>
            </el-tab-pane>
            <el-tab-pane label="上报协议" name="fourth">
                <DataHandlerView :data="dataDetails!"/>
            </el-tab-pane>
            <el-tab-pane label="日志" name="fifth">
                <CollectLogView :data="dataDetails!"/>
            </el-tab-pane>
            <el-tab-pane v-if="false" label="API" name="sixth">
                <APIView/>
            </el-tab-pane>
        </el-tabs>

    </el-card>
</template>

<script setup lang="ts">
import {ref} from "vue";
import {useRoute, useRouter} from "vue-router";
import {Back, Refresh} from "@element-plus/icons-vue";
import {IdGetDataCollectApi} from "@/api/group";
import type {CollectTask} from "@/model/group";
import HarvesterData from "@/views/data/components/HarvesterData.vue"
import ResolverView from "@/views/data/components/ResolverView.vue"
import DataHandlerView from "@/views/data/components/DataHandlerView.vue";
import CollectLogView from "@/views/data/components/CollectLogView.vue";
import APIView from "@/views/data/components/APIView.vue";
import type {TabsPaneContext} from 'element-plus'


const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

// 获取路由参数
const route = useRoute();



const router = useRouter();
// 加载
const loading = ref(false);


/** 采集器详情 */
const dataDetails = ref<CollectTask>({
    collectBaseValuesJson: "",
});

/**
 * id 获取采集器详情
 * @param id 采集器id
 */
async function getDataCollect(id: number) {
    loading.value = true;
    const res = await IdGetDataCollectApi(id).finally(
        () => (loading.value = false)
    );
    dataDetails.value = res.data;

}

/**
 *
 * 返回采集列表
 */
function goBack() {
    window["collectGroupId"] = route.params.groupId
    router.push({name: "DataCollect"});
}

/** 获取采集器详情 */
// getDataCollect(route.params.id as unknown as number);
getDataCollect(route.params.id as unknown as number);
</script>

<style scoped>
:deep(.el-tabs__nav-wrap::after) {
    position: static !important;
}

</style>
